<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="../assets/lib/echarts/echarts.min.js"></script>
</head>

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#main'));
    //设置
    const option = {
    // 网格（整个图表区域设置）
    grid: {
      top: 50,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
      axisPointer: { // 坐标轴指示器配置项
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 图例
    legend: {},
    // X轴
    xAxis: [
      {
        type: 'category',
        //组号
        data: [1,2,3,4,5,34],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    // Y轴
    yAxis: [
      {
        type: 'value',
        min: 0, // y轴数据最小值
        max: 100, // y轴数据最大值
        interval: 10, // step步长，把y轴的数据分成多少份
        axisLabel: { // Y轴文字设置
          formatter: '{value}分', // Y轴文字
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value}人'
        }
      }
    ],
    // 数据部分（4组数据）
    series: [
      {
        name: '平均分',
        type: 'bar',
        data: [3,2,5,6,34],
        barWidth: '15',
      },
      {
        name: '低于60分人数',
        type: 'bar',
        data: [3,3,5,37,9],
        barWidth: '15',
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
      },
      {
        name: '60到80分之间',
        type: 'bar',
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        barWidth: '15',
        data: [4,5,6,41,7]
      }
      ,
      {
        name: '高于80分人数',
        type: 'bar',
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        barWidth: '15',
        data: [2,4,5,56,5]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  </script>
</body>

</html>